<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>计算机网络课程思政体系 - 封面</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&display=swap');

    :root {
      --primary-red: #BE0000;
      --dark-red: #8B0000;
      --light-red: #F8D7DA;
      --gold: #D4AF37;
    }

    body {
      font-family: 'Noto Serif SC', 'Computer Modern', serif;
      overflow: hidden;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .party-header {
      background: linear-gradient(135deg, var(--primary-red) 0%, var(--dark-red) 100%);
      color: white;
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .party-header::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 10%, transparent 20%),
        radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.05) 5%, transparent 15%),
        radial-gradient(circle at 40% 70%, rgba(255, 255, 255, 0.08) 8%, transparent 18%),
        radial-gradient(circle at 70% 90%, rgba(255, 255, 255, 0.05) 7%, transparent 15%);
      background-size: 100% 100%;
      z-index: 0;
    }

    .party-content {
      position: relative;
      z-index: 1;
      text-align: center;
      max-width: 800px;
      padding: 2rem;
    }

    .gold-text {
      color: var(--gold);
      font-weight: 600;
    }

    .click-hint {
      position: absolute;
      bottom: 3rem;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0.8;
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0% {
        transform: translateX(-50%) scale(1);
        opacity: 0.6;
      }

      50% {
        transform: translateX(-50%) scale(1.1);
        opacity: 1;
      }

      100% {
        transform: translateX(-50%) scale(1);
        opacity: 0.6;
      }
    }

    @media (max-width: 768px) {
      h1 {
        font-size: 3.5rem !important;
      }

      h2 {
        font-size: 3rem !important;
      }

      p {
        font-size: 2rem !important;
      }
    }
  </style>
</head>

<body onclick="window.location.href='main.html'">
  <div class="party-header">
    <div class="party-content">
      <h1 class="text-6xl md:text-7xl font-bold mb-6">架构<span class="gold-text">“网络协作哲学”</span></h1>
        <h2 class="text-5xl md:text-6xl font-semibold mb-8">铸就 <span class="gold-text">“大国担当精神”</span></h2>
        <p class="text-4xl md:text-5xl italic">—《计算机网络》课程思政体系</p>
        <p class="mt-10 text-3xl">谭程宏 韩腾跃 计算机工程学院</p>
    </div>
    <div class="click-hint text-white text-2xl">
      <i class="fa fa-hand-pointer-o mr-2"></i>点击进入
    </div>
  </div>

  <script>
    // 增强用户体验：添加点击波纹效果
    document.body.addEventListener('click', function (e) {
      const ripple = document.createElement('div');
      ripple.className = 'ripple';
      ripple.style.left = e.clientX + 'px';
      ripple.style.top = e.clientY + 'px';
      document.body.appendChild(ripple);

      setTimeout(() => {
        ripple.remove();
      }, 600);
    });
  </script>

  <style>
    .ripple {
      position: fixed;
      width: 100px;
      height: 100px;
      margin-left: -50px;
      margin-top: -50px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      transform: scale(0);
      animation: ripple-effect 0.6s;
      pointer-events: none;
    }

    @keyframes ripple-effect {
      0% {
        transform: scale(0);
        opacity: 1;
      }

      100% {
        transform: scale(15);
        opacity: 0;
      }
    }
  </style>
</body>

</html>